import React, {useState, useEffect} from 'react'
import {Table,Tooltip,Image,Button,Modal,notification} from 'antd'
import axios from 'axios' 
import {
  DeleteOutlined,
  ExclamationCircleOutlined
} from '@ant-design/icons';

const {confirm} = Modal

export default function Posting() {

    const [dataSource, setDataSource] = useState([])
    useEffect(()=>{
        axios.get("/api/topics/get_all_topics").then(res=>{
          console.log(res.data)
          setDataSource(res.data.result)
        })
      },[]) 

    const columns = [
        {
          title: '帖子id',
          dataIndex: 'id',
          key: 'id',
          render:(id)=>{
            return <b>{id}</b>
          }
        },
        {
          title: '发帖人',
          dataIndex: 'topic_user_name',
          key: 'topic_user_name',
          render:(topic_user_name)=>{
            return <b>{topic_user_name}</b>
          }
        },
        {
            title: '帖子类型',
            dataIndex: 'topic_type',
            key: 'topic_type',
            render:(topic_type)=>{
              return <b>{topic_type}</b>
            }
        },
        {
            title: '帖子题目',
            dataIndex: 'topic_title',
            key: 'topic_title',
            render:(topic_title)=>{
                return <b>{topic_title}</b>
            }
        },
        {
            title: '帖子配图',
            dataIndex: 'topic_img',
            key: 'topic_img',
            render:(topic_img)=>{
              return(
                  <Image style={{width:"50px",height:"50px"}} src={topic_img}/>
              ) 
            }
        },
        {
          title: '帖子详情',
          dataIndex: 'topic_content',
          key: 'topic_content',
          render:(topic_content)=>{
            return <b>{topic_content}</b>
        }
        },
        {
          title: '发帖日期',
          dataIndex: 'createdAt',
          key: 'createdAt',
          render:(createdAt)=>{
              return <b>{createdAt.slice(0,10)}</b>
          }
        },
        {
            title: '更新日期',
            dataIndex: 'updatedAt',
            key: 'updatedAt',
            render:(updatedAt)=>{
                return <b>{updatedAt.slice(0,10)}</b>
            }
        },
        {
          title: '操作',
          render:(item)=>{
            return <div>
              <Button danger shape="circle" 
                icon={<DeleteOutlined />}  
                style={{marginRight:"10px"}}
                onClick={()=>confirmMethod(item)}
              />
            </div>
          }
        },
    ]
    //弹框确认是否删除
    const confirmMethod=(item)=>{
      Modal.confirm({
          title: '您确定要删除吗?',
          icon: <ExclamationCircleOutlined />,
          onOk() {
              console.log('OK');
              deleMethod(item);
              notification.info({
              message:'通知',
              description:
                  '删除成功',
              placement:"bottomRight",
              });
          },
          onCancel() {
              console.log('Cancel');
          },
      });
  }
  //删除方法
  const deleMethod =(item)=>{
      // 当前页面同步状态
      setDataSource(dataSource.filter(data=>data.id !== item.id))
      console.log(item.id)
      const id = item.id
      //要前后端同步
      axios.post('/api/topics/delete_my_topic',{id:id})
  }
    return (
        <div>
            <Table dataSource={dataSource} columns={columns}
              pagination={{
                pageSize:10}} 
              rowKey={item=>item.id}
            />
        </div>
    )
}